<template>
    <div class="common-nav clearfix" :class="[ color ]">
        <div v-for="(nav, index) in navs"
            :key="index"
            class="nav-item"
            :class="{active: value == nav.value}"
            :style="{width: width}"
            @click="onClickItem(nav)">
            <div class="label">
                <span class="right_border" v-if="index < navs.length && index >0 &&( nav.value == 'all' || nav.value == 'init' || nav.value == 'paid' || nav.value == 'received' || nav.value == 'return' || nav.value == 'evaluate')"></span>
                {{nav.text1}} 
            </div>
            <div class="iten_bottom_border" v-if="nav.value == 'team' || nav.value == 'record' || nav.value == 'board'" :class="value == nav.value?'iten_bottom_border_active':''"></div>
            <div v-if="nav.text2 != null" class="data">{{nav.text2}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CommonNav',
    props: {
        value: {},
        navs: {
            type: Array,
            default() {
                return [];
            },
        },
        color: {
            type: String,
            default: 'red',

        },
    },
    computed: {
        width() {
            return `${(1 / this.navs.length) * 100}%`;
        },
    },
    methods: {
        onClickItem(nav) {
            this.$emit('change', nav);
            this.$emit('input', nav.value);
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.right_border{
    position: absolute;
    top: 26rpx;
    left: 0rpx;
    width: 1rpx;
    height: 20rpx;
    border-right: 1rpx solid #E3E3E3;
}
.iten_bottom_border{
    position: absolute;
    bottom: 6rpx;
    left: 35%;
}
.iten_bottom_border_active{
    width: 30%;
    height: 1rpx;
    border-bottom: 1rpx solid #D0A8A9;
}

.common-nav {
    background-color: @white-color;
    .nav-item {
        position: relative;
        float: left;
        padding: 16rpx 0;
        text-align: center;
        border-bottom: 6rpx solid @white-color;
        box-sizing: border-box;
        .label {
            .text-normal();
             font-size: 12px;
        }
        .data {
            .text-small();
        }
    }
    &.red {
        .active {
            // color: @color-font-red;
            // border-bottom: 6rpx solid @color-font-red;
            color: #DCA5AB;
        }
    }
    &.yellow {
        // .nav-item {
        //     border-bottom: 6rpx solid @color-yellow;
        // }
        .active {
            // color: @color-yellow;
            border-bottom: 6rpx solid @color-yellow;
        }
    }
    &.blue {
        .active {
            color: @color-blue;
            border-bottom: 6rpx solid @color-blue;
        }
    }
    &.grey {
        background-color: #f8f8f8;
        .nav-item {
            border-bottom: 6rpx solid #f8f8f8;
        }
        .active {
            color: @color-red;
            border-bottom: 6rpx solid @color-red;
        }
    }
}
</style>
